<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="js/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>

    <title>Admin Login</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/login.css" rel="stylesheet">
    
    <script>
    
    	function doLogin() {
    		$.ajax({
    			url : "./Login.do" ,
    			dataType : "json",
    			type : "POST",
    			data : $("#loginForm").serialize(),
    			cache : false,
    			error : function(XMLHttpRequest, textStatus, errorThrown) {
     				alert(XMLHttpRequest.responseText + errorThrown);
    			},
    			success : function(data) {
    				if (data.err == 0) {
    					window.location.href="index.jsp";
    				} else {
    					$("#msgDialog").show();
    				}
    			}
    		});
    		return false;
    	} 
    	
    	function closeMsg() {
    		$("#msgDialog").hide();
    		return false;
    	}
    </script>
    
  </head>

  <body>

    <div class="container">

      <form class="form-signin" role="form" id="loginForm" onSubmit="doLogin();return false;">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input name="username" type="email" class="form-control" placeholder="Email address" required autofocus>
        <input name="password" type="password" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
      
      <div class="alert alert-danger alert-dismissible" role="alert" id="msgDialog">
	  	<button type="button" class="close" id="msgCloseBtn" onclick="closeMsg()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	  	<strong>Error!</strong> Invalid username or password.
	  </div>
    </div> <!-- /container -->
    <script>
    	$("#msgDialog").hide();
    </script>
  </body>
</html>
